<template>
  <div class="app-container">
    <el-table
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 10px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="120px" type="index" label="拉货价值区间" align="center" />
      <el-table-column prop="minAmount" min-width="100px" label="区间下限值" align="center" />
      <el-table-column prop="maxAmount" min-width="100px" label="区间上限值" align="center" />
      <el-table-column min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <k-button class="table-btn" value="晶粹掉落概率配置" @click.native="bulletFallSettingDialog(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 晶粹配置 弹窗 -->
    <k-dialog
      :show-hide.sync="bulletSetting"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="晶粹掉落概率配置"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveBulletSetting"
    >
      <div class="set_box">
        <div v-for="(item,index) in bulletSettingItemList" :key="item.id" class="Recharge_Data">
          <div class="Recharge_Data_box">
            <span>晶粹数量:</span>
            <el-input v-model.trim="item.minAmmo" />
            <i style="margin: 0 2px;"> — </i>
            <el-input v-model.trim="item.maxAmmo" style="margin-right:20px" />
            <span>掉落概率:</span>
            <el-input v-model.trim="item.probability" /> %
          </div>
          <div class="operation">
            <i v-show="index != 0" class="el-icon-remove" @click="deleteItem(item.id,index)" />
            <i v-show="index == bulletSettingItemList.length - 1" class="el-icon-circle-plus" @click="newlyAdded()" />
          </div>
        </div>
        <span>预期晶粹掉落数量：{{ getExpectedBulletNums() }}</span>
      </div>
    </k-dialog>

  </div>
</template>

<script>
import { getAmmoLuckyList, seAmmoLuckyList, getAmmoLuckyGradeList } from '@/api/bullet/index'

export default {
  name: 'Extension',
  data() {
    return {
      currentSort: undefined,
      bulletSetting: false,
      bulletSettingItemList: [{
        id: undefined,
        minAmmo: undefined,
        maxAmmo: undefined,
        probability: undefined,
        sort: undefined
      }],
      listData: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getAmmoLuckyGradeList().then(res => {
        this.listData = res.data
      })
    },
    // 设置新增
    newlyAdded() {
      this.bulletSettingItemList.push({
        id: undefined,
        minAmount: undefined,
        maxAmount: undefined,
        probability: undefined
      })
    },
    // 设置删除
    deleteItem(value, indexItem) {
      if (!value) {
        this.bulletSettingItemList.splice(indexItem, 1)
        return
      }
      var index = this.bulletSettingItemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.bulletSettingItemList.splice(index, 1)
      }
    },
    bulletFallSettingDialog(row) {
      this.currentSort = row.sort
      this.bulletSetting = true
      getAmmoLuckyList({ sort: row.sort }).then(res => {
        this.bulletSettingItemList = res.data
      })
    },
    getExpectedBulletNums() {
      const expectBulletNums = this.bulletSettingItemList.map(item => {
        return (Number(item.minAmmo) + Number(item.maxAmmo)) / 2 * item.probability
      }).reduce(function(a, b) {
        return Number(a) + Number(b)
      })
      this.$log(expectBulletNums)
      return expectBulletNums / 100
    },
    saveBulletSetting() {
      const probSum = this.bulletSettingItemList.map(item => {
        return item.probability
      }).reduce(function(a, b) {
        return Number(a) + Number(b)
      })
      this.$log(probSum)
      if (100 - Number(probSum).toFixed(2) !== 0) {
        this.$message.error('掉落概率和要等于100,还需要 ' + (100 - probSum).toFixed(2))
        return
      }
      this.bulletSettingItemList.map((item, index) => {
        item.sort = this.currentSort
      })
      seAmmoLuckyList(this.bulletSettingItemList).then(res => {
        this.$message.success('保存成功')
        this.bulletSetting = false
      })
    }
  }

}
</script>

<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.table-btn{
  width: 150px;
  height: 35px;
  line-height:35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
   &:focus {
     background-color: #e7ecf8;
  }
}

.set_box {
    width: 700px;
    margin: 0 80px;
    box-sizing: border-box;
    .Recharge_Data {
      width: 100%;
      height: 40px;
      margin-top: 10px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .Recharge_Data_box {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-input {
          width: 150px;
          height: 35px;
          input {
            width: 150px;
            height: 35px;
          }
        }
        span {
          font-size: 14px;
          width: 100px;
        }
      }
      .operation {
        width: 12%;
        display: flex;
        justify-content: space-between;
        .el-icon{
            &-circle-plus, &-remove{
              font-size: 22px;
              color:#3b425d;
              margin-left: 10px;
          }
        }
      }
     }
 }
</style>
